<template>
  <el-card class="search-card">
    <h3>文章搜索</h3>
    <el-form @submit.prevent="handleSearchSubmit" label-position="top" :model="searchParams">
      <el-row :gutter="20">
        <!-- 分类 -->
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="分类">
            <el-select v-model="searchParams.categoryId" placeholder="选择分类" clearable style="width: 100%">
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="(name, id) in categoriesMap"
                :key="id"
                :label="name"
                :value="id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 标题 -->
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="标题">
            <el-input v-model="searchParams.title" placeholder="输入标题关键词" />
          </el-form-item>
        </el-col>

        <!-- 内容 -->
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="内容">
            <el-input v-model="searchParams.content" placeholder="输入内容关键词" />
          </el-form-item>
        </el-col>

        <!-- 时间范围 -->
        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="searchParams.begin"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchParams.end"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button type="primary" native-type="submit" style="margin-right: 10px">搜索</el-button>
        <el-button @click="resetForm" plain>重置</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, watch } from 'vue';
import api from '../api/api';
import { useCategories } from '../composables/useCategory';
import { useArticleSearch } from '../composables/useArticleSearch';
import { useArticleStore } from '../stores/useArticleStore ';

const articleStore = useArticleStore();

// 使用组合函数获取分类数据
const { categoriesMap, fetchCategories } = useCategories();
const { searchResults, searchParams, submitSearch, resetForm } = useArticleSearch();

// 在组件挂载时获取分类数据
fetchCategories();

const handleSearchSubmit = async () => {
  await submitSearch(); // 调用组合函数中的 submitSearch

  if (searchResults.value && searchResults.value.articles) {
    // 更新 Pinia Store 中的状态
    articleStore.updateState({
      articles: searchResults.value.articles,
      total: searchResults.value.total,
      page: searchResults.value.page,
      limit: searchResults.value.limit
    });
  }
};

</script>

<style scoped>
/* 页面结构与布局 */
.search-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.search-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a3b7c;
  margin-bottom: 1.2rem;
}

/* 输入控件样式 */
.el-input__inner,
.el-select__input,
.el-date-picker__input {
  border-color: #dce4ef;
  color: #333333;
}

.el-input__inner::placeholder,
.el-select__input::placeholder,
.el-date-picker__input::placeholder {
  color: #999999;
}

.el-input__inner:hover,
.el-select__input:hover,
.el-date-picker__input:hover {
  border-color: #3c6ea4;
}

/* 按钮样式 */
.el-button--primary {
  background-color: #1a3b7c;
  color: #ffffff;
  transition: background-color 0.3s;
}

.el-button--primary:hover {
  background-color: #2b5b9e;
}

.el-button--plain {
  background-color: #e4e7ed;
  color: #666666;
  border-color: #dcdfe6;
  transition: background-color 0.3s;
}

.el-button--plain:hover {
  background-color: #f1f3f6;
}

/* 操作区域排布 */
.form-actions {
  margin-top: 1.5rem;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .el-col {
    width: 100%;
  }

  .form-actions .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
<style>
/* 全局样式，设置页面背景色 */
body {
  background-color: #f5f9ff;
}
</style>